<%--
  Created by IntelliJ IDEA.
  User: zer
  Date: 2019/9/20
  Time: 19:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=0.58,maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/ySelect.css">
    <link rel="stylesheet" type="text/css"
          href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">

    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script rel="script" src="js/ySelect.js"></script>
    <script rel="script" src="js/page.js"></script>

    <title>文件列表</title>
    <style type="text/css">
        body {
            background: url(img/背景.png) repeat 0 0;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row" align="center">

        <div class="row" align="center">
            <img src="img/logo.png" style="margin-top: -40px;">
        </div>
        <div class="row banxin3">

            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <select id='screen' multiple="multiple">
                    <option value="text">文本</option>
                    <option value="picture">图片</option>
                    <option value="office">office</option>
                    <option value="voice">音频</option>
                    <option value="video">视频</option>
                    <option value="other">其它</option>
                </select>
            </div>
            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="margin-left: -90px">
                <button id="screenBtn" class="btn btn-default btn-sm" style="background-color: gainsboro">过滤</button>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" >
                <a href="javascript:void(0);" style="float: right">
                    <img src="img/back.png" style="width: 20px; height: 15px;"/>
                    返回上一步</a>
            </div>

        </div>

        <div class="row banxin3">

            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <select id='sort'>
                    <optgroup label="升序">
                        <option value="sortByUpLoadDateAsc">上传时间</option>
                        <option value="sortByFileNameAsc">文件名称</option>
                        <option value="sortByFileSizeAsc">文件大小</option>
                    </optgroup>
                    <optgroup label="降序">
                        <option value="sortByUpLoadDateDasc">上传时间</option>
                        <option value="sortByFileNameDasc">文件名称</option>
                        <option value="sortByFileSizeDasc">文件大小</option>
                    </optgroup>
                </select>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="right">
                <input id="search" type="text" placeholder="请输入搜索内容" value=""/>
                <input type="image" value=" " src="img/search.png" class="input_sub">
            </div>
        </div>

        <div class="row banxin3 lwhite">

            <s:iterator begin="(#session.page)*9"
                        end="%{(#session.page)*9+8 >= #session.myFileList.size-1 ? #session.myFileList.size-1 : (#session.page)*9+8}"
                        value="#session.myFileList" var="file" status="st">

                <a href="javascript:void(0);" onclick="submitForm(${st.index})">
                    <s:if test="#(st.index+1) % 3 == 0 ">

                    </s:if>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" align="center">
                        <form id="form_${st.index}" method="post"
                              action="${pageContext.request.contextPath}/DownLoadAction_downLoad">
                            <input type="hidden" name="file_id" value="${file.file_id}">
                        </form>
                        <img src="${pageContext.request.contextPath}/${file.icon}" style="width: 180px"><br>
                        <span style="display: inline-block;width: 220px;text-align: center">${file.filesFileName}</span>
                    </div>
                </a>

            </s:iterator>


            </div>
            <div  class="row banxin3" style="text-align: right">
                <div id="inster" style="width: 100%">
                    <span>${page+1}</span>
                    <span>/</span>
                    <span id="nnext"><fmt:formatNumber type="number" value="${(myFileList.size() + 9 - 1) / 9 - 0.5}" maxFractionDigits="0"/></span>
                </div>
        </div>
    </div>
</div>
</body>
<script>
    $(function () {
        $('#sort').ySelect();
        $('#screen').ySelect({numDisplayed: 5});
        $("#sort").prev().attr("id", "sortTable");
        $("#sortTable div[class='fs-option']").click(function () {
            window.location.href = "${pageContext.request.contextPath}/ListAction_" + $(this).attr("data-value");
        });
        $("#screenBtn").click(function () {
            var fileType = $("#screen").ySelectedValues(",");
            window.location.href = "${pageContext.request.contextPath}/ListAction_screenByFileType?fileType=" + fileType;
        });
    });

    function submitForm(id) {
        $("#form_" + id).submit();
    }
</script>
<script>
    $(function () {
        if((${page+1}) > 1) {
            $('#inster').prepend('<a href="${pageContext.request.contextPath}/ListAction_turnUpPage" class="btn btn-primary" style="padding:5px"><上一页</a>');
        } else {
            $('#inster').prepend('<span style="color: #cccccc;padding: 5px">首页</span>');
        }
        if((${page+1}) != Math.ceil(${(myFileList.size() + 9 - 1) / 9 - 0.5})){
            $('#nnext').append('<a href="${pageContext.request.contextPath}/ListAction_turnDownPage" class="btn btn-primary" style="padding:5px">下一页></a>');
        }else {
            $('#nnext').append('<span style="color: #cccccc;padding: 5px">尾页</span>');
        }
    })

</script>
</html>
